<template>
  <div :style="getStyle()">
    <a-icon style="position: absolute;right: 12px;top: 12px;size: 24px" type="close" @click="$emit('close')"></a-icon>
    <chrome-picker
      v-show="visiblePicker"
      ref="chromePicker"
      :style="{'position':'absolute','z-index':'2','top':pickerTop,'right':'18px','background-color':'red'}"
      :value="colors"
      @input="updateValue"></chrome-picker>
    <a-form>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="默认节点颜色"
        style="margin-top: 36px">
        <a-input
          v-model="settingStyle.defaultNodeColor"
          :disabled="true"
          style="width: 75%">
          <div
            slot="addonAfter"
            :style="{'width':'20px','height':'20px','background-color':settingStyle.defaultNodeColor}"
            @click="v=>showColorPicker(v,0)"></div>
        </a-input>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="relation_graph_setting_space"
        label="默认节点文字颜色">
        <a-input
          v-model="settingStyle.defaultNodeFontColor"
          :disabled="true"
          style="width: 75%">
          <div
            slot="addonAfter"
            :style="{'width':'20px','height':'20px','background-color':settingStyle.defaultNodeFontColor}"
            @click="v=>showColorPicker(v,1)"></div>
        </a-input>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="relation_graph_setting_space"
        label="默认节点形状">
        <a-radio-group
          v-model="settingStyle.defaultNodeShape"
          button-style="solid"
          size="small"
          @change="v=>configChange(v,'defaultNodeShape')">
          <a-radio-button :value="0">圆形</a-radio-button>
          <a-radio-button :value="1">矩形</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="relation_graph_setting_space"
        label="默认节点大小">
        <span>宽度</span>
        <a-input-number
          v-model="settingStyle.defaultNodeWidth"
          :max="300"
          :min="1"
          size="small"
          style="width: 60px;margin-left: 10px"
          @blur="v=>configChange(v,'defaultNodeWidth')"></a-input-number>
        <span style="margin-left: 12px">高度</span>
        <a-input-number
          v-model="settingStyle.defaultNodeHeight"
          :max="300"
          :min="1"
          size="small"
          style="width: 60px;margin-left: 10px"
          @blur="v=>configChange(v,'defaultNodeHeight')"></a-input-number>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="默认线条颜色">
        <a-input
          v-model="settingStyle.defaultLineColor"
          :disabled="true"
          style="width: 75%">
          <div
            slot="addonAfter"
            :style="{'width':'20px','height':'20px','background-color':settingStyle.defaultLineColor}"
            @click="v=>showColorPicker(v,2)"></div>
        </a-input>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="relation_graph_setting_space"
        label="默认连接线粗细">
        <a-radio-group
          v-model="settingStyle.defaultLineWidth"
          button-style="solid"
          size="small"
          @change="v=>configChange(v,'defaultLineWidth')">
          <a-radio-button
            v-for="i in 5"
            :key="i"
            :value="i">{{ i }}
          </a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="relation_graph_setting_space"
        label="默认线条形状">
        <a-radio-group
          v-model="settingStyle.defaultLineShape"
          button-style="solid"
          size="small"
          @change="v=>configChange(v,'defaultLineShape')">
          <a-radio-button
            v-for="item in lineShapes"
            :key="item.name"
            :value="item.value">{{ item.name }}
          </a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="relation_graph_setting_space"
        label="默认显示连线文字">
        <a-switch
          :default-checked="settingStyle.defaultShowLineLabel"
          @change="v=>switchChange(v,'defaultShowLineLabel')" />
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="relation_graph_setting_space"
        label="默认禁用鼠标滚轮缩放">
        <a-switch
          :default-checked="settingStyle.disableZoom"
          @change="v=>switchChange(v,'disableZoom')" />
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="relation_graph_setting_space"
        label="默认禁用节点拖动">
        <a-switch
          :default-checked="settingStyle.disableDragNode"
          @change="v=>switchChange(v,'disableDragNode')" />
      </a-form-item>
      <a-form-item>
        <a-button
          @click="$emit('save')"
          style="float: right;margin-right: 12px;margin-top: -10px">保存
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { Chrome } from 'vue-color'

export default {
  name: 'RelationGraphSetting',
  components: {
    'chrome-picker': Chrome
  },
  created() {
    const keys = Object.keys(this.settingStyle)
    keys.forEach((it) => {
      this.settingStyle[it] = this.defaultSetting[it]
    })
  },
  mounted() {
    this.$refs.chromePicker.toggleViews = () => {
    }
    const toggle = document.getElementsByClassName('vc-chrome-toggle-btn')[0]
    toggle.style.marginTop = '15px'
    toggle.style.width = 'auto'
    const svgParent = toggle.children[0]
    const svg = svgParent.children[0]
    svgParent.removeChild(svg)
    svgParent.style.marginTop = '12px'
    const span = document.createElement('span')
    span.innerText = '关闭'
    span.addEventListener('click', () => {
      this.visiblePicker = false
    })
    svgParent.appendChild(span)
    const confirm = document.createElement('span')
    confirm.innerText = '确定'
    confirm.setAttribute('style', 'margin-left:12px')
    confirm.addEventListener('click', () => {
      const key = this.colorMap[this.currentIndex]
      this.settingStyle[key] = this.colors
      this.$emit('configChange', { 'key': key, 'value': `${this.colors}` })
      this.visiblePicker = false
    })
    svgParent.appendChild(confirm)
  },
  methods: {
    switchChange(v, key) {
      this.$emit('configChange', { 'key': key, 'value': v })
    },
    configChange(v, key) {
      const value = v.target.value
      this.$emit('configChange', { 'key': key, 'value': value })
    },
    updateValue(color) {
      this.colors = color.hex
    },
    showColorPicker(view, type) {
      this.currentIndex = type
      const key = this.colorMap[type]
      this.colors = `${this.settingStyle[key]}`
      switch (type) {
        case 0:
          this.pickerTop = '72px'
          break
        case 1:
          this.pickerTop = '122px'
          break
        case 2:
          this.pickerTop = '287px'
          break
        default:
          break
      }
      this.visiblePicker = true
    },
    getStyle() {
      return Object.assign(this.originStyle, {
        'background-color': '#f8f8f8',
        'width': '420px',
        'border': '#e5e5e5 1px solid'
      })
    }
  },
  data() {
    return {
      settingStyle: {
        defaultNodeWidth: 45,
        defaultNodeHeight: 45,
        defaultNodeColor: '#ff00ff', // 默认节点颜色
        defaultNodeFontColor: '#ff00ff', // 默认节点文本颜色
        defaultLineColor: '#ff00ff', // 默认线条形状
        defaultNodeShape: 0, // 默认节点形状 0 圆形 1 矩形
        defaultLineWidth: 1, // 默认连线粗细
        defaultLineShape: 1, // 默认的线条形状 1直线 2简洁 3生动 5鱼尾 4折线
        defaultShowLineLabel: true, // 默认显示连接文字
        disableZoom: false, // 默认禁用鼠标滚轮缩放
        disableDragNode: false // 默认禁用节点拖动
      },
      visiblePicker: false,
      colorMap: ['defaultNodeColor', 'defaultNodeFontColor', 'defaultLineColor'],
      colors: '#ffffff',
      currentIndex: 0,
      pickerTop: '0',
      lineShapes: [{ name: '直线', value: 1 }, { name: '简洁', value: 2 }, { name: '生动', value: 3 }, {
        name: '鱼尾',
        value: 5
      }, { name: '折线', value: 4 }],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      }
    }
  },
  props: {
    originStyle: {
      type: Object,
      required: true
    },
    defaultSetting: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang='less' scoped>
.relation_graph_setting_space {
  margin-top: -15px;
}
</style>
